<template>
  <div style="margin-bottom: 20px;">
    <el-dialog :title="edit_main_title" append-to-body v-dialogDrag :visible.sync="edit_flag"
               width="1000px"  @open="handleOpenConfig" :before-close="handleClose">
      <el-form label-width="120px" ref="carDetailEditFrom" class="web_form_new"
               :rules="carDetailEditRules" :model="carDetailData" :disabled="editMakeDisabled">
        <el-form-item label="制造商" prop="makerName">
<!--          <el-input type="text" :disabled="makeInputDisabled" clearable v-model="carDetailData.no" class="w184"></el-input>-->
          <el-select v-model="carDetailData.makerName" class="w184"
                     :disabled="makeInputDisabled || noDisabled"
                     filterable remote reserve-keyword placeholder="请输入关键词"
                     @change="selectCorp($event,'no')" :remote-method="getMakersListFunc">
            <el-option v-for="(item,index) in makersList" :key="index" :label="item.name" :value="item.no"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌" prop="brandName">
<!--          <el-input type="text" :disabled="makeInputDisabled" clearable v-model="carDetailData.brand" class="w184"></el-input>-->
          <el-select v-model="carDetailData.brandName" class="w184"
                     :disabled="makeInputDisabled || brandDisabled"
                     filterable remote reserve-keyword placeholder="请输入关键词"
                     @change="selectCorp($event,'brand')" :remote-method="getBrandsListFunc">
            <el-option v-for="(item,index) in brandsList" :key="index" :label="item.name" :value="item.no"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车系" prop="seriesName">
<!--          <el-input type="text" :disabled="makeInputDisabled" clearable v-model="carDetailData.vehicle" class="w184"></el-input>-->
          <el-select v-model="carDetailData.seriesName" class="w184"
                     :disabled="makeInputDisabled || vehicleDisabled"
                     filterable remote reserve-keyword placeholder="请输入关键词"
                     @change="selectCorp($event,'vehicle')" :remote-method="getCarSeriesListFunc">
            <el-option v-for="(item,index) in carSeriesList" :key="index" :label="item.name" :value="item.no"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车型" prop="modelName">
<!--          <el-input type="text" :disabled="makeInputDisabled" clearable v-model="carDetailData.modelNo" class="w184"></el-input>-->
          <el-select v-model="carDetailData.modelName" class="w184"
                     :disabled="makeInputDisabled || modelNoDisabled"
                     filterable remote reserve-keyword placeholder="请输入关键词"
                     @change="selectCorp($event,'modelNo')" :remote-method="getModelsListFunc">
            <el-option v-for="(item,index) in modelsList" :key="index" :label="item.name" :value="item.no"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车架号" prop="vin">
          <el-input type="text" :disabled="makeInputDisabled" clearable v-model="carDetailData.vin" class="w184"></el-input>
        </el-form-item>
        <el-form-item label="车队" prop="fleet">
          <el-input type="text" :disabled="makeInputDisabled" clearable v-model="carDetailData.fleet" class="w184"></el-input>
        </el-form-item>
        <el-form-item label="车牌号" prop="plateLicenseNo">
          <el-input type="text" clearable v-model="carDetailData.plateLicenseNo" class="w184"></el-input>
        </el-form-item>
<!--        <el-form-item label="车长" prop="vehicleLength">-->
<!--          <el-input type="text" :disabled="makeInputDisabled" clearable v-model="carDetailData.vehicleLength" class="w184"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="车宽" prop="vehicleWidth">-->
<!--          <el-input type="text" :disabled="makeInputDisabled" clearable v-model="carDetailData.vehicleWidth" class="w184"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="车高" prop="vehicleHeight">-->
<!--          <el-input type="text" :disabled="makeInputDisabled" clearable v-model="carDetailData.vehicleHeight" class="w184"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="车厢长" prop="carriageLength">-->
<!--          <el-input type="text" :disabled="makeInputDisabled" clearable v-model="carDetailData.carriageLength" class="w184"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="车厢宽" prop="carriageWidth">-->
<!--          <el-input type="text" :disabled="makeInputDisabled" clearable v-model="carDetailData.carriageWidth" class="w184"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="车厢高" prop="carriageHeight">-->
<!--          <el-input type="text" :disabled="makeInputDisabled" clearable v-model="carDetailData.carriageHeight" class="w184"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="所属地" prop="selectedOptionsStart">
          <el-cascader
            class="w184"
            placeholder="任意搜索地区"
            :options="areaData"
            filterable
            change-on-select
            @change="startAddressChange"
            v-model="carDetailData.selectedOptionsStart"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="启用状态" prop="vehicleStatus">
          <el-select class="w184" v-model="carDetailData.vehicleStatus" filterable remote reserve-keyword placeholder="请选择状态">
            <el-option key="1" label="正常" value="10"></el-option>
            <el-option key="2" label="禁用" value="40"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="6" style="width: 250px"
                    v-model="carDetailData.description"  placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <!--按钮-->
      <el-row type="flex" justify="end">
        <!--<el-button type="primary" @click="handleClose">关闭</el-button>-->
        <el-button class="mr30" v-if="edit_main_title !== '查看'" type="primary" @click="confirmClick">提交</el-button>
      </el-row>
      <div style="height:20px"></div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
  import Area from '@/utils/area/index'
  import * as Utils from '@/utils/index'
  import * as CarDeployMgtAPI from '@/api/carDeploy'
  export default {
    name: '',
    components: {},
    props: ['edit_flag', 'edit_main_title', 'edit_select_row', 'edit_params'],
    data() {
      return {
        carDetailData: {
          fleet: '',
          vehivleId: '',
          makerNo: '',
          makerName: '', // 制造商  名称
          brandNo: '',
          brandName: '', // 品牌 名称
          seriesNo: '',
          seriesName: '', // 车系 名称
          modelNo: '',
          modelName: '', // 车型 名称
          plateLicenseNo: '', // 车牌号
          vin: '', // 车架号
          // vehicleLength: '0', // 车辆长度
          // vehicleWidth: '0', // 车辆宽度
          // vehicleHeight: '0', // 车辆高度
          // vehicleLoad: '0', // 车辆载重
          // vehicleWeight: '0', // 车辆自重
          // carriageVolume: 0, // 车厢体积
          // carriageLength: 0, // 车厢长度
          // carriageWidth: 0, // 车厢宽度
          // carriageHeight: 0, // 车厢高度
          vehicleStatus: '10',
          description: '', // 备注
          selectedOptionsStart: ['510000', '510100', '510104']
        },
        areaData: Area, // 省-市-区三级联动选择
        selectArea: {
          province: '',
          city: '',
          county: ''
        },
        condition: {
          no: '',
          name: '',
          status: '',
          startDate: '',
          endDate: ''
        },
        carDetailEditRules: {
          fleet: [{ required: true, message: '请选择', trigger: 'change' }],
          makerName: [{ required: true, message: '请选择', trigger: 'change' }],
          brandName: [{ required: true, message: '请选择', trigger: 'change' }],
          seriesName: [{ required: true, message: '请选择', trigger: 'change' }],
          modelName: [{ required: true, message: '请选择', trigger: 'change' }],
          vin: [{ required: true, message: '请输入', trigger: 'change' }],
          plateLicenseNo: [{ required: true, message: '请输入', trigger: 'change' }],
          vehicleStatus: [{ required: true, message: '请选择', trigger: 'change' }],
          selectedOptionsStart: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        noDisabled: true,
        brandDisabled: true,
        vehicleDisabled: true,
        modelNoDisabled: true,
        carDetailType: '',
        makersList: [], // 制造商列表
        brandsList: [], // 品牌列表
        carSeriesList: [], // 车系列表
        modelsList: [], // 车型列表
        vehicleAreaList: [], // 车所属地址
        makeInputDisabled: false, // 供应商-input 禁用
        editMakeDisabled: false // 供应商面板禁用
      }
    },
    mounted() {
    },
    methods: {
      // 三级连选 起运地地址
      startAddressChange(val) {
        const selectArr = val
        console.log('startAddressChange()-val', val)
        this.selectArea = Utils.areaCode2AreaName(selectArr)
        console.log('startAddressChange()-res_obj', this.selectArea)
      },
      // 获取 列表
      getMakersListFunc() {
        const that = this
        this.noDisabled = false
        this.resetCondition()
        CarDeployMgtAPI.getMakersList(this.condition).then(res => {
          that.makersList = res.data
        })
      },
      // 获取 列表
      getBrandsListFunc() {
        const that = this
        CarDeployMgtAPI.getBrandsList(this.condition).then(res => {
          that.brandsList = res.data
        })
      },
      // 获取 列表
      getCarSeriesListFunc() {
        const that = this
        CarDeployMgtAPI.getCarSeriesList(this.condition).then(res => {
          that.carSeriesList = res.data
        })
      },
      // 获取 列表
      getModelsListFunc() {
        const that = this
        CarDeployMgtAPI.getModelsList(this.condition).then(res => {
          that.modelsList = res.data
        })
      },
      // 获取 列表
      getVehicleAreaListFunc() {
        const that = this
        CarDeployMgtAPI.getVehicleAreaList(this.selectArea).then(res => {
          that.vehicleAreaList = res.data
          // if (res.data && res.data.length > 0) {
          //   this.filterAreaFunc(res.data)
          // }
        })
      },
      filterAreaFunc(arr) {
        this.areaData.filter(item => {
          //
        })
      },
      // 选择 设置名称导出 $event,scope.row,'modelNo'
      selectCorp($event, value) {
        console.log('selectCorp(value)', $event, value)
        const that = this
        if (value === 'no') {
          that.makersList.map(item => {
            if ($event === item.no) {
              that.carDetailData.makerNo = item.no
              that.carDetailData.makerName = item.name
              this.brandDisabled = false
              this.resetCondition()
              this.condition.makerNo = item.no
              this.condition.makerName = item.name
              this.getBrandsListFunc()
            }
          })
        } else if (value === 'brand') {
          that.brandsList.map(item => {
            if ($event === item.no) {
              that.carDetailData.brandNo = item.no
              that.carDetailData.brandName = item.name
              this.vehicleDisabled = false
              this.resetCondition()
              this.condition.brandNo = item.no
              this.condition.brandName = item.name
              this.getCarSeriesListFunc()
            }
          })
        } else if (value === 'vehicle') {
          that.carSeriesList.map(item => {
            if ($event === item.no) {
              that.carDetailData.seriesNo = item.no
              that.carDetailData.seriesName = item.name
              this.modelNoDisabled = false
              this.resetCondition()
              this.condition.seriesNo = item.no
              this.condition.seriesName = item.name
              this.getModelsListFunc()
            }
          })
        } else if (value === 'modelNo') {
          that.modelsList.map(item => {
            if ($event === item.no) {
              that.carDetailData.modelNo = item.no
              that.carDetailData.modelName = item.name
              this.resetCondition()
            }
          })
        }
      },
      // 弹窗页打开初始
      handleOpenConfig(data) {
        const that = this
        console.log(that.$props.edit_main_title, 'that.$props', that.$props.edit_select_row, that.$props.edit_params)
        const { makerNo, brandNo, seriesNo, modelNo, makerName, brandName, seriesName, modelName, vehivleId,
          province, city, county, plateLicenseNo, vin, vehicleStatus, description, fleet } = that.$props.edit_select_row
        const { type } = that.$props.edit_params
        console.log('接收到的省市区')
        // 解析 省市区 编码
        const { provinceCode, cityCode, countyCode } = Utils.areaName2AreaCode([province, city, county])
        // 重置
        that.makersList = [] // 制造商列表
        that.brandsList =  [] // 品牌列表
        that.carSeriesList =  [] // 车系列表
        that.modelsList =  [] // 车型列表
        that.vehicleAreaList = []
        that.noDisabled =  true
        that.brandDisabled = true
        that.vehicleDisabled =  true
        that.modelNoDisabled = true
        that.editMakeDisabled = false
        that.makeInputDisabled = false
        that.carDetailData = {
          fleet: '',
          vehivleId: '',
          makerNo: '',
          makerName: '', // 制造商  名称
          brandNo: '',
          brandName: '', // 品牌 名称
          seriesNo: '',
          seriesName: '', // 车系 名称
          modelNo: '',
          modelName: '', // 车型 名称
          plateLicenseNo: '', // 车牌号
          vin: '', // 车架号
          vehicleStatus: '10',
          description: '', // 备注
          selectedOptionsStart: ['', '', '']
        }
        that.carDetailType = type
        // 查看 新增 编辑
        if (that.$props.edit_main_title === '新增') {
          this.getMakersListFunc()
          // this.getVehicleAreaListFunc()
        } else if (that.$props.edit_main_title === '编辑') {
          that.carDetailData = { makerNo, brandNo, seriesNo, modelNo, selectedOptionsStart: [provinceCode, cityCode, countyCode],
            vehivleId, makerName, brandName, seriesName, modelName, plateLicenseNo, vin, vehicleStatus, description, fleet
          }
          that.editMakeDisabled = false
          that.makeInputDisabled = true
          that.noDisabled =  false
          that.brandDisabled = false
          that.vehicleDisabled =  false
          that.modelNoDisabled = false
        } else if (that.$props.edit_main_title === '查看') {
          that.carDetailData = { makerNo, brandNo, seriesNo, modelNo, selectedOptionsStart: [provinceCode, cityCode, countyCode],
            vehivleId, makerName, brandName, seriesName, modelName, plateLicenseNo, vin, vehicleStatus, description, fleet
          }
          that.editMakeDisabled = true
        }
        // console.log('editFlag', that.editFlag, 'addFlag', that.addFlag)
      },
      confirmClick() {
        const that = this
        that.$refs['carDetailEditFrom'].validate((valid) => {
          if (valid) {
            const { makerNo, brandNo, seriesNo, modelNo, makerName, brandName, seriesName, modelName,
              plateLicenseNo, vin, vehicleStatus, description, vehivleId, fleet } = that.carDetailData
            const { province, city, area } = that.selectArea
            const toParams = {
              vehicle: { makerNo, brandNo, seriesNo, modelNo, vehivleId, fleet,
                makerName, brandName, seriesName, modelName, plateLicenseNo, vin, vehicleStatus, description
              },
              vehicleArea: {
                province, city, county: area
              }
            }
            if (that.$props.edit_main_title === '新增') {
              if (that.carDetailType === 'detail') {
                CarDeployMgtAPI.vehiclesCreateVehicles(toParams).then(res => {
                  that.$message({
                    message: '新增成功',
                    type: 'success',
                    duration: 2000
                  })
                  that.$emit('edit-confirm', false)
                }).catch(err => {
                  console.log('error', err)
                })
              }
            } else if (that.$props.edit_main_title === '编辑') {
              if (that.carDetailType === 'detail') {
                CarDeployMgtAPI.vehiclesCreateVehicles(toParams).then(res => {
                  that.$message({
                    message: '编辑成功',
                    type: 'success',
                    duration: 2000
                  })
                  that.$emit('edit-confirm', false)
                }).catch(err => {
                  console.log('error', err)
                })
              }
            }
          }
        })
      },
      resetCondition() {
        this.condition = {
          no: '',
          name: '',
          status: '',
          startDate: '',
          endDate: ''
        }
      },
      handleClose() {
        this.$emit('edit-close', false)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /*web_form*/
  .web_form_new{
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
  }
  .w220{
    width: 220px;
  }
  /*common*/
  tr.pad-t-b7>th{
    padding-top: 7px;
    padding-bottom: 7px;
  }
  /*<!--table-->*/
  .add-edit-table {
    border-collapse:collapse;
    width: 100%;
    overflow-x: scroll;
  }
  .add-edit-table th{
    color:#878d99
  }
  .add-edit-table th,td{
    border: 1px solid #e6ebf5;
    text-align: center;
  }
  .position-input{
    width: 80px;
  }
  .edit-table-header{
    border-left: 1px solid #e6ebf5;
    border-top: 1px solid #e6ebf5;
    border-right: 1px solid #e6ebf5;
    box-sizing: content-box;
    padding-left: 6px;
  }
  .edit-add-position{
    padding: 2px 10px;
    margin-left: 6px;
  }
  /*<!--去掉 input 上下箭头按钮-->*/
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
</style>



